@import '../../style/var.less';

.tx-history {
  display: flex;
  flex-direction: column;

  &__item {
    position: relative;
    background: var(--r-neutral-card-1, rgba(255, 255, 255, 0.06));
    border-radius: 6px;
    margin-bottom: 12px;
    box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.08);
    &--main {
      padding: 8px 12px 16px;
    }
    .tx-explain {
      display: inline-flex;
      margin: 0;
      align-items: center;
      font-weight: 500;
      font-size: 15px;
      line-height: 18px;
      color: var(--r-neutral-title-1, #f7fafc);
      flex: 1;
      .icon-explain {
        width: 18px;
        height: 18px;
        margin-right: 8px;
        border-radius: 2px;
      }
      .tx-explain__text {
        overflow: hidden;
        max-width: 250px;
        cursor: pointer;
        span {
          text-overflow: ellipsis;
          white-space: nowrap;
          overflow: hidden;
        }
        .icon-external {
          display: none;
          margin-left: 6px;
          path {
            fill: var(--r-neutral-foot, #babec5);
          }
        }
        &:hover {
          text-decoration: underline;
          .icon-external {
            display: block;
          }
        }
      }
    }
    .pending {
      position: absolute;
      top: 0;
      left: 12px;
      border-radius: 0px 0px 4px 4px;
      background: var(--r-orange-light, #645d50);
      padding: 4px 6px;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 12px;
      color: var(--r-orange-default, #ffc64a);
      font-weight: 400;
      line-height: 14px;
      gap: 4px;

      .icon-pending-spin {
        width: 12px;
        height: 12px;
        animation: spining 1.5s infinite linear;

        path {
          fill: var(--r-orange-default, #ffc64a);
        }
      }
    }
    .tx-id.tx-id {
      display: flex;
      justify-content: space-between;
      font-size: 12px;
      color: var(--r-neutral-foot, #babec5);
      margin-bottom: 14px;
      line-height: 14px;
      text-decoration: none;
    }
    .tx-footer {
      margin-top: 16px;
      display: flex;
      align-items: flex-end;
      &__actions {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        margin-right: -5px;
        .icon-action {
          cursor: pointer;
          width: 24px;
          height: 24px;
          &:nth-child(1) {
            margin-right: 4px;
          }
          &:nth-last-child(1) {
            margin-left: 4px;
          }
        }
        .hr {
          width: 0.5px;
          height: 12px;
          background-color: @color-border;
        }
      }
    }
    .ahead {
      font-size: 12px;
      line-height: 14px;
      color: var(--r-neutral-foot, #6a7587);
    }
    &--children {
      background-color: var(--r-neutral-card2, #f2f4f7);
      border-radius: 0px 0px 4px 4px;
      padding: 12px;
      font-size: 12px;
      line-height: 14px;
      color: var(--r-neutral-foot, #babec5);
      .pending-detail {
        display: flex;
        align-items: center;
        color: #707280;
        font-size: 12px;
        margin-bottom: 10px;
        .icon-question-mark {
          width: 10px;
          height: 10px;
          margin-left: 6px;
        }
      }
      &__item {
        display: flex;
        margin-bottom: 10px;
        .tx-type {
          width: 95px;
        }
        .ahead {
          flex: 1;
          margin-left: 25px;
          font-size: 12px;
        }
        .icon-spin {
          animation: spining 1.5s infinite linear;
          path {
            fill: var(--r-neutral-foot, #babec5);
          }
        }
        &:nth-last-child(1) {
          margin-bottom: 0;
        }
      }
    }
  }

  &__pending {
    .tx-history__item {
      .tx-footer {
        margin-top: 12px;
      }
    }
  }

  &__completed {
    .subtitle {
      margin-bottom: 12px;
    }
    .tx-history__item {
      .tx-history__item--main {
        padding-bottom: 16px;
      }
    }
  }
  &__empty {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    .no-data {
      width: 100px;
      height: 100px;
      margin: 135px auto 0;
    }
  }
  &__bottom {
    display: flex;
    flex: 1;
    align-items: flex-end;
    justify-content: center;
  }
}

.pending-detail__tooltip {
  .ant-tooltip-inner {
    transform: translateX(60px);
  }
}
.cant-cancel__tooltip {
  .ant-tooltip-arrow {
    transform: translateX(-7px);
  }
}

.header-view-all-transaction,
.bottom-view-all-transaction {
  display: flex;
  font-size: 12px;
  color: var(--r-neutral-foot, #babec5);
  align-items: center;
  white-space: nowrap;
  position: absolute;
  right: 0;
  line-height: 20px;
  bottom: 0;
  font-weight: normal;
  &:hover {
    color: var(--r-neutral-foot, #babec5);
  }
  .icon-external {
    width: 12px;
    height: 12px;
    margin-left: 4px;
    path {
      fill: var(--r-neutral-foot, #babec5);
    }
  }
}

.bottom-view-all-transaction {
  justify-content: center;
  position: static;
  margin-top: 36px;
}

.mempool-list-popover {
  padding-top: 3px;

  .ant-popover-arrow {
    display: none;
  }
  .ant-popover-inner-content {
    padding: 0;
  }
  .ant-popover-inner {
    border: 0.5px solid var(--r-neutral-line, rgba(255, 255, 255, 0.1));
    background: var(--r-neutral-bg-1, #3d4251);
    box-shadow: 0px 8px 24px 0px rgba(0, 0, 0, 0.25);
  }
}
